<template>
  <div style="border-top: 1px solid #EAEDF3; margin-top: 2px;">
    <section class="searchBox">
      <!-- <el-row :gutter="40" type="flex" justify="space-between">
        <el-col :span="8">
          <div class="flex-box">
            <el-input
              v-model="listQuery.condition.keyword"
              class="fl"
              placeholder="请输入活动标题"
              prefix-icon="el-icon-search el-input__icon"
              style="border: none"
              @keyup.enter.native="searchList"
            />
          </div>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="$router.push({name:'pushTeaching'})">发布教研</el-button>
        </el-col>
      </el-row>-->

      <el-row v-if="listData &&listData.length > 0" :gutter="20">
        <el-col v-for="(item, index) in listData" :key="index" :span="6" class="list-box">
          <div
            class="block"
            @click="$router.push({name:'teachingDetails', query: { activityId: item.activityId, isCollect: true }})"
          >
            <el-image :src="item.coverImageUrl" fit="contain" style=" height: 200px" />
          </div>
          <div
            class="describe"
            @click="$router.push({name:'teachingDetails', query: { activityId: item.activityId }})"
          >
            <div class="text-ellipsis-1 line-height30 fs-16" v-html="item.title" />
            <div class="orgName line-height20 marginT10">
              <el-image :src="orgName" fit="contain" style="width: 20px; height: 20px" />
              <span class="text-ellipsis-1 marginL10 fs-16" v-html="item.orgName" />
            </div>
            <div class="text-box line-height20 marginT15">
              <div class="left text-s-o line-height30">
                <span v-for="(cate, inx) in item.categoryNameList" :key="inx">
                  <i v-if="inx > 0">/</i>
                  {{ cate }}
                </span>
              </div>
              <div class="right line-height30">
                <el-tag v-if="item.activityProgress === 'NOT_STARTED'" size="medium">未开始</el-tag>
                <el-tag v-if="item.activityProgress === 'STARTED'" size="medium">进行中</el-tag>
                <el-tag v-if="item.activityProgress === 'ENDED'" size="medium">已结束</el-tag>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

      <el-row v-else>
        <el-col class="list-box">
          <div style="text-align: center;">暂无教研数据</div>
        </el-col>
      </el-row>

      <Pagination
        v-if="total > 0"
        :limit="12"
        :total="total"
        class="pagination"
        @pagination="pagination"
      />
    </section>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { collectTeachingResearch } from '@/api/myCollect'
import { liveState } from './data'
export default {
  name: 'TeachingResearch',
  components: {
    Pagination
  },
  data () {
    return {
      orgName: require('@/assets/images/orgName.png'),
      listData: null,
      total: null,
      optionState: liveState,
      listQuery: {
        pager: {
          page: 1,
          pageSize: 12
        }
      }
    }
  },

  watch: {
  },
  mounted () {

  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      await this.searchList()
    },
    searchList () {
      collectTeachingResearch(this.listQuery).then(res => {
        console.log('collectTeachingResearch:', res.data.records)
        this.listData = res.data.records
        this.total = res.data.total
      })
    },
    pagination ({ page, limit }) {
      this.listQuery.pager.page = page
      this.listQuery.pager.pageSize = limit
      this.init()
    }

  }
}
</script>
<style lang="scss" scoped>
.searchBox {
  padding: 24px 40px;
}

.list-box {
  border-radius: 10px;
  overflow: hidden;
  margin-top: 24px;
  .orgName {
    display: flex;
    align-content: center;
    span {
      flex: 1;
      color: rgba(0, 0, 0, 0.45);
    }
  }
  .block {
    background-color: white;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    text-align: center;
  }
  .img {
    width: 100%;
  }
  .describe {
    background-color: white;
    padding: 0 16px 10px;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    .text-box {
      display: flex;
    }
    .left {
      color: rgba(0, 0, 0, 0.25);
    }
    .right {
      flex: 1;
      text-align: right;
    }
  }
}
.pagination {
  margin-top: 20px;
}
</style>
